<template>
  <Drawer
    :transfer="true"
    title="审批人设置"
    v-model="$store.state.approverDrawer"
    placement="right"
    class="set_promoter"
    width="550px"
    :before-close="closeDrawer"
  >
    <div class="demo-drawer__content">
      <div class="drawer_content">
        <Form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          :label-width="177"
          class="demo-ruleForm"
        >
          <p class="tooltip-txt">请先选择作业类型</p>
          <FormItem label="组件类型" prop="txt1">
            <Select v-model="ruleForm.txt1" placeholder="请选择">
              <Option
                v-for="item in zuoyeType"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </Option>
            </Select>
          </FormItem>
          <template v-if="ruleForm.txt1">
            <FormItem label="选择表文件迁移作业" prop="txt2">
              <Select v-model="ruleForm.txt2" placeholder="请选择">
                <Option
                  v-for="item in zuoyeType"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </Option>
              </Select>
            </FormItem>
            <FormItem label="节点名称" prop="txt3">
              <Input
                :maxlength="41"
                v-model="ruleForm.txt3"
                placeholder="请输入节点名称"
              />
            </FormItem>
            <FormItem label="节点状态轮询时间（秒）" prop="txt4">
              <InputNumber
                class="wd-100"
                :max="3600"
                :min="1"
                v-model="ruleForm.txt4"
                placeholder="请输入节点状态轮询时间（1~3600,正整数）"
              />
            </FormItem>
            <FormItem label="节点执行的最长时间" prop="txt5">
              <InputNumber
                class="wd-100"
                :max="3600"
                :min="1"
                v-model="ruleForm.txt5"
                placeholder="请输入节点执行的最长时间（1~3600,正整数）"
              >
                <Select
                  slot="append"
                  style="width: 70px"
                  v-model="ruleForm.txt6"
                >
                  <Option
                    v-for="item in timeType"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </Option>
                </Select>
              </InputNumber>
            </FormItem>
            <FormItem label="失败重试" prop="txt7">
              <RadioGroup v-model="ruleForm.txt7">
                <Radio label="0">否</Radio>
                <Radio label="1">是</Radio>
              </RadioGroup>
            </FormItem>
          </template>
        </Form>
      </div>
      <div class="demo-drawer__footer clear">
        <Button type="primary" @click="saveApprover">确 定</Button>
        <Button @click="closeDrawer">取 消</Button>
      </div>
    </div>
  </Drawer>
</template>
<script>
import { validateRules } from "@/plugins/fromValidate";
export default {
  props: ["directorMaxLevel"],
  data() {
    return {
      approverConfig: {},
      zuoyeType: [
        {
          value: "1",
          name: "表文件作业",
        },
        {
          value: "2",
          name: "MySQL脚本",
        },
        {
          value: "3",
          name: "Hive脚本",
        },
        {
          value: "4",
          name: "shell脚本",
        },
        {
          value: "5",
          name: "质量作业",
        },
        {
          value: "6",
          name: "延时器",
        },
        {
          value: "7",
          name: "子作业",
        },
        {
          value: "8",
          name: "文件上传",
        },
      ],
      timeType: [
        {
          value: "1",
          name: "时",
        },
        {
          value: "2",
          name: "分",
        },
        {
          value: "3",
          name: "秒",
        },
      ],
      ruleForm: {
        txt1: "",
        txt2: "",
        txt3: "",
        txt4: 30,
        txt5: 2,
        txt6: "1",
        txt7: "0",
      },
      rules: {
        txt1: [
          { required: true, message: "请选择组件类型", trigger: "change" },
        ],
        txt2: [
          { required: true, message: "选择表文件迁移作业", trigger: "change" },
        ],
        txt3: [
          validateRules.required(),
          validateRules.maxLength(40),
          validateRules.nameRegx01(),
        ],
        txt4: [
          validateRules.required("", "", "number"),
          { validator: validateRules.numRegx, trigger: "blur" },
        ],
        txt5: [
          validateRules.required("", "", "number"),
          { validator: validateRules.numRegx, trigger: "blur" },
        ],
        txt7: [validateRules.required("change")],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  computed: {
    approverConfig1() {
      return this.$store.state.approverConfig.value;
    },
  },
  watch: {
    approverConfig1(val) {
      this.approverConfig = val;
    },
  },
  methods: {
    saveApprover() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.approverConfig.error = !this.$func.setApproverStr(
            this.approverConfig
          );
          this.$store.commit("updateApproverConfig", {
            value: this.approverConfig,
            flag: true,
            id: this.$store.state.approverConfig.id,
          });
          this.$emit("update:nodeConfig", this.approverConfig);
          this.closeDrawer();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    closeDrawer() {
      this.$refs.ruleForm.resetFields();
      this.$store.commit("updateApprover", false);
    },
  },
};
</script>
<style lang="less">
.tooltip-txt {
  color: #333;
  font-size: 16px;
  padding: 3px 0 15px 20px;
}
</style>